
import React from 'react'
import ReactDOM from 'react-dom'

import * as SuggestionAction  from '../../actions/SuggestionAction';
import { connect }  from 'react-redux';

class SuggestionReplyEdit extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {},
      reply_content: ""
    }
  }

  componentWillReceiveProps(props) {
    // console.log(props.data)
    this.setState({
      data: props.data,
      sysuser: props.sysuser,
      id: props.data.id,
      content: props.data.content
    })

    if (props.suggestionReply) {
      var content = ""
      if (props.suggestionReply.length > 0) {
         content = props.suggestionReply[0].content;
      }
      this.setState({
        reply_content: content
      })
    }
  }

  componentDidMount(props) {
    // this.setState({
    //   data: props.data,
    //   content: props.dataContent
    // })

  }

  componentDidUpdate () {

  }


  onChange(event, key) {
    var value = $(event.target).val();
    this.setState({
      reply_content: value
    })

  }


  pad(n) {
    return n < 10 ? "0"+n : n;
  }

  onDataSubmit() {
    var data = this.state.data;
    var sysUserId = this.state.sysuser.id;
    var replyContent = this.props.suggestionReply;
    var content = this.state.reply_content;

    if (!content || content.length == 0) {
      alert("请填写完整信息!")
      return;
    }

    if(replyContent && replyContent.length > 0){
      // var replyContent = replyContent[0].content;
      this.props.onUpdateReply({
        content: content,
        reply_id: replyContent[0].id
      })

    }else if(replyContent.length == 0){
      if (data.id) {
        this.props.onReplySubmit({
          content: content,
          sys_user_id: sysUserId,
          suggestion_id: data.id
        })
      }
    }

    this.setState({
      reply_content: ""
    })
  }

  onDataCancel(){
    this.setState({
      reply_content: ""
    })
  }


  render() {
    var self = this;
    return (
      <div className="modal fade" id="BillBoardSettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="Delivery-modal-label">意见回复</h4>
            </div>
            <div className="modal-body">
              <div className="form-group">
              <div className="panel panel-default">
                <div className="panel-heading">反馈内容</div>
                  <div className="panel-body">
                    <p>{this.state.content}</p>
                  </div>
                </div>

              </div>
              <div className="form-group">
                <label for="Delivery-name">回复反馈</label>
                {this.props.data.has_reply?<textarea ref="ReplyContent" type="text" className="form-control"
                        id="Delivery-name" placeholder="回复反馈" value={this.state.reply_content}
                        onChange={(event)=>this.onChange(event, "reply_content")} disabled>
                        </textarea>:<textarea ref="ReplyContent" type="text" className="form-control"
                        id="Delivery-name" placeholder="回复反馈" value={this.state.reply_content}
                        onChange={(event)=>this.onChange(event, "reply_content")}>
                </textarea>}

              </div>

            </div>
            <div className="modal-footer">

              <button type="button" className="btn btn-default" data-dismiss="modal"
                      onClick={(event)=> this.onDataCancel()}>取消</button>
              {this.props.data.has_reply?false:<button type="button" className="btn btn-primary"
                      onClick={(event)=> this.onDataSubmit()}>提交</button>}
            </div>
          </div>
        </div>
      </div>
    )
  }
}


const mapStateToProps = (state, ownProps) => {
  // console.log(state.suggestionReply);
  return {
    suggestionReply: state.suggestionReply.data
  }
}

export default connect(mapStateToProps)(SuggestionReplyEdit);
